<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
    <div id="app">
		<p>computed 依赖其他的值,且具有缓存,缓存变化才会更新

			只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 进行数值计算，并且依赖于其它数据用它
			watch 没有缓存 监听某一个值 变化进行一些操作
			
			数据变化时执行异步或开销较大的操作时用它</p>
        <button @click="changeValue">更新Value</button>
		<button @click="getComputedValue">打印computedValue</button>
    </div>
    <script>
        const app = new Vue({
        el: '#app',
        data(){
		return {
			value: 1
		}
	},
	computed: {
		computedValue(){
			return this.value + '--' + Math.random()
		}
	},
	methods: {
		changeValue(){
			this.value++;
		},
		getComputedValue(){
			console.log(this.computedValue);
		}
	}
 })
    </script>
</body>
</html>
